<template>
  <div class="healthRecord">
    <div class="titleSt">饮食记录<span>关心您的饮食健康 --{{msg.msg}}</span></div>
    <div class="tabs">
      <div class="bgC"></div>
      <div :class="['tab', 'leftTab', state.acTab === 'getDietDayRecord' ? 'acTab leftAcTab':'']" @click="changeTab('getDietDayRecord')">今日摄入量</div>
      <div :class="['tab', 'rightTab', state.acTab === 'getDietWeekRecord' ? 'acTab rightAcTab':'']" @click="changeTab('getDietWeekRecord')">本周摄入量</div>
    </div>
    <div class="content">
      <div class="echarts" id="sheruEchar"></div>
      <div class="legend">
        <span class="leg yleg">最大摄入量</span>
        <span class="leg gleg">目标摄入量</span>
        <span class="leg bleg">实际摄入量</span>
      </div>
      <div class="eatCard" v-if="state.lessList.length">
        <span class="leftTitle">摄入不足</span>
        <span class="rightDesc">
        <span v-for="(item, i) in state.lessList" :key="i">{{item}}</span>
      </span>
      </div>
      <div class="eatCard redCard" v-if="state.moreList.length">
        <span class="leftTitle">摄入超量</span>
        <span class="rightDesc">
        <span v-for="(item, i) in state.moreList" :key="i">{{item}}</span>
      </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, reactive, toRefs, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import {http} from "@/axios/http";
import * as API from "@/axios/api";
import utils from '@/utils/utils.ts';
import {getRadarOption, raderChar} from './initChar.js';

const route = useRoute();
const instance = <any>getCurrentInstance();
const { $echarts } = instance.appContext.config.globalProperties;

let userId = ref('');
let state = reactive({
  acTab:'',
  lessList: [],
  moreList: [],
  sheru: ''
})
let indicator = reactive([
  {
    text: '豆鱼蛋类',
    max: 0,
    code: 'Beanfish'
  },
  {
    text: '主食',
    max: 0,
    code: 'Staple'
  },
  {
    text: '水果',
    max: 0,
    code: 'Fruit'
  },
  {
    text: '奶',
    max: 0,
    code: 'Milk'
  },
  {
    text: '坚果',
    max: 0,
    code: 'Nut'
  },
  {
    text: '蔬菜',
    max: 0,
    code: 'Vegetable'
  },
])

let { dataJson, msg } = withDefaults(defineProps<{
  dataJson: any,
  msg: any
}>(), {
  dataJson: {},
  msg: {}
})
const emit = defineEmits<{
  (e: 'saveData', data: any): void
}>()

// 非ts
// let props = defineProps<{
//   dataJson: {},
//   msg: ''
// }>()
// const emit = defineEmits(['saveData'])

// let  { dataJson, msg } = toRefs(props);

let getDite = () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  })
  http({
    baseUrl: API.baseUrl,
    url: API[state.acTab],
    method: 'POST',
    params: JSON.stringify({
      userId: userId.value, // '300012' ||
      dateStr: utils.getDateStrs() // '2022-07-21' ||
    })
  },(res) =>{
    Toast.clear()
    if (res && res.data && res.data.code === 200) {
      state.lessList = []
      state.moreList = []
      let allData = res.data.data ? res.data.data : null
      let smallArr = [], maxArr = [], reComArr = [], intakeArr = []
      if (!allData) return
      indicator.map((v) => {
        let reCommed = 'sumCommend' + v.code
        let intake = 'sumIntake' + v.code
        v.max = (allData[reCommed] || 0 )* 2
        smallArr.push((allData[reCommed] || 0)/2)
        maxArr.push(v.max)
        reComArr.push(allData[reCommed] || 0)
        intakeArr.push(allData[intake] || 0)
        if (allData[intake] < allData[reCommed] * 0.9) {
          state.lessList.push(v.text)
        } else if (allData[intake] > allData[reCommed] * 1.1) {
          state.moreList.push(v.text)
        }
      })
      let dataJson2 = {
        smallArr,
        maxArr,
        reComArr,
        intakeArr,
        lessList: state.lessList,
        moreList: state.moreList,
        indicator: JSON.parse(JSON.stringify(indicator))
      }
      emit('saveData', dataJson2, state.acTab);
      setChartOp(indicator, smallArr, maxArr, reComArr, intakeArr)
    } else {
      utils.toastMsg(res, this, API[state.acTab])
    }
  })
}
let setChartOp = (indicator, smallArr, maxArr, reComArr, intakeArr) => {
  let option1 = raderChar()
  option1.radar.indicator = indicator
  option1.series[0].data[0].value = smallArr
  option1.series[0].data[1].value = maxArr
  option1.series[0].data[2].value = reComArr
  option1.series[0].data[3].value = intakeArr
  state.sheru?.setOption(option1)
}
let changeTab = (tab) => {
  console.log('--dataJson:---msg', dataJson, msg)
  if (state.acTab === tab) return
  state.acTab = tab
  let data = dataJson[tab]
  if(data && Object.keys(data).length>0) {
    state.moreList = data.moreList
    state.lessList = data.lessList
    setChartOp(data.indicator, data.smallArr, data.maxArr, data.reComArr, data.intakeArr)
  } else {
    getDite()
  }
}
onMounted(() => {
  let checkQueryResult = utils.checkRouterParams(route.query, true)
  state.sheru = $echarts.init(document.getElementById('sheruEchar'))
  if (checkQueryResult) {
    userId.value = route.query.userId as string;
    changeTab('getDietDayRecord')
  }
})
onUnmounted(() => {
  $echarts.dispose(state.sheru)
})
</script>

<style scoped lang="scss">
.healthRecord{
  width: 355px;
  min-height: 450px;
  background: linear-gradient(155deg, #F6F3FF 0%, #DCECFF 100%), linear-gradient(202deg, rgba(181,223,254,0.8600) 0%, rgba(255,255,255,0) 100%);
  border-radius: 8px;
  margin: 0 auto;
  padding-bottom: 1px;
  .titleSt{
    color: #261B0E;
    font-size: 20px;
    font-weight: 600;
    padding: 14px 12px;
    text-align: left;
    span{
      font-size: 13px;
      color: rgba(28,28,30,0.8);
      font-weight: 400;
    }
  }
  .tabs{
    display: flex;
    align-items: flex-end;
    font-size: 16px;
    text-align: center;
    width: 331px;
    margin: 0 auto;
    position: relative;
    .bgC{
      position: absolute;
      width: 100%;
      height: 30px;
      background-color: #ffffff;
      bottom: 0;
      left: 0;
      z-index: 0;
    }
    .tab{
      height: 37px;
      line-height: 37px;
      background-color: #CFE3FF;
      color: rgba(34,34,34,0.6);
      flex: 1;
      position: relative;
    }
    .leftTab{
      border-radius: 8px 0px 8px 0;
    }
    .rightTab{
      border-radius: 0 8px 0 8px;
    }
    .leftAcTab{
      border-radius: 8px 8px 0 0;
    }
    .rightAcTab{
      border-radius: 8px 8px 0 0;
    }
    .acTab{
      font-weight: 600;
      color: #4B7AFF;
      //height: 45px;
      //line-height: 45px;
      padding-top: 8px;
      box-sizing: content-box;
      background-color: #ffffff;
    }
  }
  .content{
    background-color: #ffffff;
    width: 331px;
    margin: 0 auto 10px;
    padding-bottom: 1px;
    border-radius: 0 0 8px;
    .echarts{
      width: 100%;
      height: 414px;
    }
    .legend{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .leg{
        font-size: 12px;
        margin-bottom: 20px;
        position: relative;
        &:before{
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          left: -8px;
          top: 5px;
        }
      }
      .yleg{
        color: #FF9C3C;
        margin-right: 30px;
        &:before{
          background-color: #FF9C3C;
        }
      }
      .gleg{
        color: #2AD36A;
        margin-right: 30px;
        &:before{
          background-color: #2AD36A;
        }
      }
      .bleg{
        color: #2150D4;
        &:before{
          background-color: #2150D4;
        }
      }
    }
  }
  .eatCard{
    width: 307px;
    background: rgba(255,244,222,0.6100);
    border-radius: 8px;
    border-image: linear-gradient(166deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 1 1;
    backdrop-filter: blur(3px);
    margin: 0 auto 10px;
    padding: 12px;
    display: flex;
    color: #222222;
    font-size: 14px;
    .leftTitle{
      font-size: 16px;
      font-weight: 600;
      color: #FFA838;
      width: 70px;
      margin-right: 14px;
    }
    .rightDesc{
      flex: 1;
      text-align: left;
      span{
        margin-right: 16px;
      }
    }
  }
  .redCard{
    background: rgba(255,232,222,0.61);
    .leftTitle{
      color: #FF542A;
    }
  }
}
</style>
